import React, { FC } from 'react';
import { Form, FormStore } from './Form';

const CustomForm: FC = () => {
  const store = new FormStore(
    {
      username: '',
      aihao: '2',
    },
    {
      username: (name, values) => {
        if (!values[name]) {
          return '请输入username';
        }
        return undefined;
      },
    }
  );

  const onFinish = () => {
    console.log(store.get('username'), store.get('aihao'));
  };
  return (
    <>
      <Form store={store} onFinish={onFinish}>
        <Form.Field name="username" label="姓名">
          <input />
        </Form.Field>
        <Form.Field name="aihao" label="爱好">
          <select>
            <option value="1">篮球</option>
            <option value="2">足球</option>
          </select>
        </Form.Field>
        <Form.Field>
          <button>提交</button>
        </Form.Field>
      </Form>
    </>
  );
};

export default CustomForm;
